<template>
  <component :is="header"/>
  <div class="main">
    <el-row>
      <el-col :span="14">
        <div class="video-container">
          <video src="/img/login/jots.mp4"
                 class="video-col noSelect"
                 autoplay
                 loop
                 muted
          />
        </div>
      </el-col>
      <el-col :span="10">
        <el-card style="height: 100%;color: #FFFFFF;
        background: linear-gradient(360deg, #0f1827 10%, rgba(15, 24, 39, 0) 70%);
        border: #99b2fc;border-radius: 0;
                        padding: 30px;box-sizing: border-box">
          <h3 class="H3">欢迎来到星辰之旅</h3>
          <el-tabs v-model="activeName">
            <el-tab-pane label="使用电话登录" name="first">
              <el-form label-position="top">
                <el-form-item label="电话" class="item">
                  <el-input v-model="loginParam.phone"
                            placeholder="请输入电话">
                    <template #prefix>
                      <el-icon class="el-input__icon">
                        <Phone/>
                      </el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item label="密码" class="item">
                  <el-input v-model="loginParam.password"
                            placeholder="请输入密码"
                            @keydown.enter="login"
                            show-password>
                    <template #prefix>
                      <el-icon class="el-input__icon">
                        <Monitor/>
                      </el-icon>
                    </template>
                  </el-input>
                </el-form-item>
              </el-form>
              <div style="overflow: hidden">
                <div>
                  <el-row :gutter="10">
                    <el-col :span="7">
                      <el-checkbox v-model="loginParam.check" label="我已阅读并同意"
                                   value="true"
                                   size="large"/>
                    </el-col>
                    <el-col :span="6">
                      <el-link href="agreement"
                               target="_blank"
                               style="margin-top: 10px;"
                               type="primary">用户协议
                      </el-link>
                    </el-col>
                    <el-col :span="11">
                      <el-button link @click="signIn"
                                 style="float: right;margin-top: 10px;"
                                 type="primary">立即注册
                      </el-button>
                      <span style="font-size: 14px;float: right;margin-top: 10px;">没有账号？</span>
                    </el-col>
                  </el-row>
                </div>
                <el-button @click="login"
                           class="btn">
                  LOGIN
                </el-button>
              </div>
              <div class="spanText">
                <span>(体验账号:13900139000 密码:123456)</span>
              </div>
            </el-tab-pane>
            <el-tab-pane label="使用邮箱登录" name="second">
              <el-form label-position="top" class="inputType">
                <el-form-item label="邮箱" class="item">
                  <el-input v-model="backupParam.email"
                            placeholder="请输入邮箱">
                    <template #prefix>
                      <el-icon class="el-input__icon">
                        <Message/>
                      </el-icon>
                    </template>
                  </el-input>
                </el-form-item>
                <el-form-item label="密码" class="item">
                  <el-input v-model="backupParam.password"
                            placeholder="请输入密码"
                            @keydown.enter="backup"
                            show-password>
                    <template #prefix>
                      <el-icon class="el-input__icon">
                        <Monitor/>
                      </el-icon>
                    </template>
                  </el-input>
                </el-form-item>
              </el-form>
              <div style="overflow: hidden">
                <div>
                  <el-row :gutter="10">
                    <el-col :span="7">
                      <el-checkbox v-model="loginParam.check" label="我已阅读并同意"
                                   value="true"
                                   size="large"/>
                    </el-col>
                    <el-col :span="6">
                      <el-link href="/agreement"
                               target="_blank"
                               style="margin-top: 10px;"
                               type="primary">用户协议
                      </el-link>
                    </el-col>
                    <el-col :span="11">
                      <el-button link @click="signIn"
                                 style="float: right;margin-top: 10px;"
                                 type="primary">立即注册
                      </el-button>
                      <span style="font-size: 14px;float: right;margin-top: 10px;">没有账号？</span>
                    </el-col>
                  </el-row>
                </div>
                <el-button @click="backup"
                           class="btn">
                  LOGIN
                </el-button>
              </div>
              <div class="spanText">
                <p>(体验账号:lisi@example.com 密码:123456)</p>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
  <component :is="loginFooter"/>
</template>

<script setup>
import header from "@/views/base/HeaderView.vue"
import loginFooter from "@/views/base/LoginFooterView.vue";
import {ref} from "vue";
import qs from "qs";
import axios from "axios";
import router from "@/router";

const activeName = ref('first');
const loginParam = ref({
  phone: '',
  password: '',
  check: false,
})
const login = () => {
  if (loginParam.value.phone === '' || loginParam.value.phone === null) {
    errorInfo('请输入电话号码')
    return;
  }
  if (loginParam.value.password === '' || loginParam.value.password === null) {
    errorInfo('请输入密码')
    return;
  }
  if (!loginParam.value.check) {
    errorInfo('请先阅读并同意用户协议')
    return;
  }
  let data = qs.stringify(loginParam.value);
  axios.post(BASE_URL + '/v1/userLogin/login', data)
      .then((response) => {
        if (response.data.code === 2000) {
          OKInfo('登录成功')
          router.push('/').then(() => {
            window.location.reload();
          });
          localStorage.setItem('user', JSON.stringify(response.data.data));
        } else {
          errorInfo('登录失败')
          loginParam.value = {
            phone: '',
            password: '',
          }
        }
      })
}
const backupParam = ref({
  email: '',
  password: '',
  check: false,
});
const backup = () => {
  if (backupParam.value.email === '' || backupParam.value.email === null) {
    errorInfo('请输入邮箱')
    return;
  }
  if (backupParam.value.password === '' || backupParam.value.password === null) {
    errorInfo('请输入密码')
    return;
  }
  if (!loginParam.value.check) {
    errorInfo('请先阅读并同意用户协议')
    return;
  }
  let data = qs.stringify(backupParam.value);
  axios.post(BASE_URL + '/v1/userLogin/backup', data)
      .then((response) => {
        if (response.data.code === 2000) {
          OKInfo('登录成功')
          router.push('/').then(() => {
            window.location.reload();
          });
          localStorage.setItem('user', JSON.stringify(response.data.data));
        } else {
          errorInfo('登录失败')
          backupParam.value = {
            email: '',
            password: '',
          }
        }
      })
}
const signIn = () => {
  router.push('/signIn').then(() => {
    window.location.reload();
  });
}
</script>


<style scoped>
.main {
  height: 65vh;
  width: 100%;
  background-color: #192231;
}

.video-col {
  height: 65vh;

}

.noSelect {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}

.video-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.H3 {
  color: white;
}

.item {
  margin-top: 10px;
}

.btn {
  width: 100%;
  height: 40px;
  margin-top: 20px;
  background-color: rgb(103, 21, 35);
  border: none;
  border-radius: 40px;
  color: white;
  font-size: 20px;
}

.spanText {
  margin-top: 20px;
  text-align: center;
}
</style>
<style>
.el-tabs__item {
  color: white;
}

.el-form-item__label {
  color: white;
}
</style>